<template>
  <div class="detail-wrapper" :style="{'height': showAddkr || showReply ? '100vh': 'auto', 'overflow': showAddkr || showReply ? 'hidden': 'auto'}">
    <div class="kr-header">{{goalForm.goalName}}</div>
    <div class="belong clearfix">
      <span class="row-1">{{goalForm.goalTag === '1'? '公司': goalForm.goalTag === '2'? '部门': '团队'}}级</span>
      <span class="row-2" v-if="goalForm.goalExecuteDepartmentName">{{goalForm.goalExecuteDepartmentName}}{{goalForm.goalPrincipalName? `(${goalForm.goalPrincipalName})`: ''}}</span>
    </div>
    <div class="kr-progress clearfix">整体进度：<el-progress class="progress" :percentage="goalForm.goalProgressPercent || 0"></el-progress></div>
    <div class="kr-progress clearfix">目标周期：{{goalForm.goalPeriodYear}}年{{goalPeriodTime[goalForm.goalPeriodTime]}}</div>
    <div class="kr-status clearfix" style="display:flex;">
      当前状态：
      <div class="progress">{{goalForm.goalStatus === '1'? '拟定状态': goalForm.goalStatus === '2'? '执行阶段': '完成阶段'}}</div>
    </div>
    <div class="kr-status clearfix" style="display:flex;">
      目标内容：
      <div class="progress">{{goalForm.goalContent}}</div>
    </div>
    <div class="kr-status clearfix" v-if="goalForm.goalBelongName" style="display:flex;">
      对齐结果：
      <div class="progress">{{goalForm.goalBelongName}}</div>
    </div>
    <div class="kr-wrapper">
      <div class="kr-title clearfix">
        <span style="font-weight: bold;">关键结果/里程碑</span>
        <span class="add" v-if="goalForm.hasKrAuthority === '1'" @click="openKr(false)"><i class="el-icon-plus"></i>添加</span>
      </div>
      <div class="kr-list">
        <div class="kr-item" @click="openKr(kr)" v-for="kr in goalForm.krList" :key="kr.id">
          <div class="progress" v-if="kr.krDataType === '1'">
            <el-progress :width="40" :stroke-width="3" type="circle" :percentage="kr.krProgressPercent || 0"></el-progress>
          </div>
          <div class="kr-info" v-if="kr.krDataType === '1'">
            <p class="name">关键结果：{{kr.krName}}</p>
            <p class="other">
              <span>信心指数：<span v-for="confidence in kr.confidenceEntities" :key="confidence.id" style="background: #E8E8E8;padding: 0 5px;margin-right: 5px;">{{confidence.confidenceIndex}}</span></span>
            </p>
          </div>
          <div class="lcb-info" v-if="kr.krDataType === '2'">
            <p class="name">里程碑：{{kr.krName}}</p>
          </div>
        </div>
      </div>
      <div class="kr-trend">
        <div style="font-weight: bold;">目标记录</div>
        <div class="trend-list">
          <div v-for="trend in goalTrends" :key="trend.id" class="trend-item">
            <div class="row-1 clearfix">
              <div>{{trend.dynamicExecutiveName}} <span v-if="trend.dynamicDatatype === '1'">{{trend.dynamicPerformOperation}}</span></div>
              <div><i class="el-icon-delete" @click="delReply(trend.id)" v-if="trend.dynamicExecutiveId === userInfo.dingId && trend.dynamicDatatype === '2'" style="margin-right:3px;"></i>{{trend.dynamicCreateTime}}</div>
            </div>
            <div class="row-2">
              <span v-if="trend.dynamicDatatype === '1'">
                <span v-if="trend.dynamicAscription !== '1'">「{{trend.dynamicBelongName}}」</span>{{trend.dynamicContent}}
              </span>
              <div v-if="trend.dynamicDatatype === '2' && (trend.dynamicAscription === '1' && trend.dynamicContent.length > 0 || trend.dynamicAscription !== '1')" class="reply-trend">
                <div class="tr1" v-if="trend.dynamicAscription !== '1'">{{trend.dynamicPerformOperation}}</div>
                <div class="tr2">{{trend.dynamicContent}}</div>
              </div>
            </div>
            <div class="row-3">
              <div class="fileitem" v-for="(file, idx) in trend.dynamicAttachment" :key="idx">
                <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
                <span style="width: 90%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;" @click.stop="downloadFile(file.url, file.name)">{{file.name}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="goal-bottom-bar">
      <div class="reply-row" @click="openReply()"><i class="el-icon-paperclip"></i></div>
      <i class="el-icon-more" v-if="goalForm.hasGoalAuthority === '1'" @click="openGoalAction"></i>
    </div>
    <Goal ref="goal" @reload="reload"/>
    <div class="addkrDialog" v-if="showAddkr">
      <div class="mask" ref="mask" @click.stop="closeKr"></div>
      <div :class="animationName" class="addContent">
        <div class="kr-header">
          <i class="el-icon-arrow-down arrow" @click="closeKr"></i>
          {{krForm.id ? krIsCheck? '': '编辑' : '添加'}}关键结果/里程碑
        </div>
        <div class="kr-scroll" style="height: calc(100vh - 100px);overflow-y: auto;">
          <div class="kr-content">
            <div class="form-item">
              <textarea class="kr-name" :readonly="krForm.id && krIsCheck" v-model="krForm.krName" placeholder="输入关键结果/里程碑名称"></textarea>
            </div>
            <div class="form-item clearfix">
              <div class="label"><span style="color:red;">*</span>类型</div>
              <div class="input">
                <el-radio-group v-model="krForm.krDataType" size="small">
                  {{krForm.krDataType}}
                  <el-radio-button :disabled="!!krForm.id" label="1">关键结果</el-radio-button>
                  <el-radio-button :disabled="!!krForm.id" label="2">里程碑</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="form-item clearfix">
              <div class="label"><span style="color:red;">*</span>执行开始时间</div>
              <div class="input" @click="selectDate('krStartTime')">{{krForm.krStartTime}}<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="form-item clearfix">
              <div class="label"><span style="color:red;">*</span>执行结束时间</div>
              <div class="input" @click="selectDate('krFinishTime')">{{krForm.krFinishTime}}<i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="form-item clearfix">
              <textarea class="kr-name" :readonly="krForm.id && krIsCheck" v-model="krForm.krContent" placeholder="请输入关键结果/里程碑内容"></textarea>
            </div>
          </div>
          <div class="kr-other" v-if="krForm.id && krIsCheck">
            <div class="confidence" v-if="krForm.krDataType === '1'">
              <div class="confidence-header clearfix">
                <span style="font-weight:bold;">信心指数</span>
              </div>
              <div v-if="krForm.confidenceEntities.length > 0" class="confidence-list" style="margin-top: 10px;">
                <el-collapse>
                  <el-collapse-item style="pading-left: 12px;" v-for="confidence in krForm.confidenceEntities" :key="confidence.id">
                    <template slot="title">
                      <span style="margin-left: 12px;margin-right:100px;display:inline-block;width:100px;">信心指数：{{confidence.confidenceIndex}}</span><span>{{confidence.confidenceCreateTime}}</span>
                    </template>
                    <div style="padding-left: 12px;">备注：{{confidence.confidenceRemark}}</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
            <div class="confidence" v-if="krForm.krDataType === '1'">
              <div class="confidence-header clearfix">
                <span style="font-weight:bold;">关键结果进度</span>
              </div>
              <div class="kr-item-progress clearfix" style="margin-top: 10px;background: white;padding: 12px;">
                整体进度：<el-progress class="progress" :percentage="krForm.krProgressPercent || 0"></el-progress>
              </div>
            </div>
            <div class="kr-trend">
              <div style="font-weight: bold;">{{krForm.krDataType === '1'? '关键结果': '里程碑'}}记录</div>
              <div class="trend-list">
                <div v-for="trend in krTrends" :key="trend.id" class="trend-item">
                  <div class="row-1 clearfix">
                    <div>{{trend.dynamicExecutiveName}} <span v-if="trend.dynamicDatatype === '1'">{{trend.dynamicPerformOperation}}</span></div>
                    <div><i class="el-icon-delete" @click="delReply(trend.id)" v-if="trend.dynamicExecutiveId === userInfo.dingId && trend.dynamicDatatype === '2'" style="margin-right:3px;"></i>{{trend.dynamicCreateTime}}</div>
                  </div>
                  <div class="row-2">
                    <span v-if="trend.dynamicDatatype === '1'">{{trend.dynamicContent}}</span>
                    <div v-if="trend.dynamicDatatype === '2' && trend.dynamicContent.length > 0" class="reply-trend">
                      <div class="tr2">{{trend.dynamicContent}}</div>
                    </div>
                  </div>
                  <div class="row-3">
                    <div class="fileitem" v-for="(file, idx) in trend.dynamicAttachment" :key="idx">
                      <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
                      <span style="width: 90%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;" @click.stop="downloadFile(file.url, file.name)">{{file.name}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="kr-button" v-if="!krForm.id || !krIsCheck">
          <div @click="saveKr">保存</div>
        </div>
        <div class="goal-bottom-bar" v-if="krForm.id && krIsCheck">
          <div class="reply-row" @click="openReply"><i class="el-icon-paperclip"></i></div>
          <i class="el-icon-more" v-if="goalForm.hasKrAuthority === '1'" @click="openKrAction"></i>
        </div>
      </div>
    </div>
    <div class="progressDialog" v-if="showProgress">
      <div class="mask" ref="mask2" @click.stop="closeProgress"></div>
      <div :class="animationName2" class="addContent">
        <div class="kr-header">
          <i class="el-icon-arrow-down arrow" @click="closeProgress"></i>
          {{isProgress? '更新关键结果进度': '添加信心指数'}}
        </div>
        <div class="kr-content">
          <div class="form-item clearfix">
            <div class="label">{{isProgress? '设置进度': '信心指数'}}</div>
            <div class="input" style="width: calc(100% - 85px);padding-top: 4px;">
              <el-slider v-if="isProgress" v-model="krProgressPercent" show-input></el-slider>
              <el-slider v-if="!isProgress" v-model="confidenceIndex" show-input :min="0" :max="10"></el-slider>
            </div>
          </div>
          <div class="form-item clearfix" v-if="!isProgress">
            <div class="label">备注</div>
            <div class="input" style="width: calc(100% - 85px);padding-top: 4px;">
              <input type="text" v-model="confidenceRemark" style="width: 100%;line-height: 26px;outline:none;border: 1px solid #ECECEC;">
            </div>
          </div>
        </div>
        <div class="kr-button">
          <div @click="saveProgressOrCon">保存</div>
        </div>
      </div>
    </div>
    <div class="reply-page" v-if="showReply">
      <div ref="replymask" class="mask"></div>
      <div :class="animationName3" class="reply-content">
        <div class="reply-title">
          评论{{dynamic.dynamicAscription === '1'? '目标': dynamic.dynamicAscription === '2'? '关键结果': '里程碑'}}：{{dynamic.dynamicBelongName}}
        </div>
        <div class="task-info">
          <textarea @input="detectInput" placeholder="请输入评论内容" v-model="dynamic.dynamicContent"></textarea>
        </div>
        <div class="upload-file">
          <input ref="uploadInput" style="display:none;" type="file" @change="uploadFile($event, dynamic.dynamicAttachment)" multiple>
          <div class="upload-btn" @click="$refs.uploadInput.click()">添加附件</div>
          <div class="fileitem" v-for="(file, idx) in dynamic.dynamicAttachment" :key="idx">
            <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
            <span @click="downloadFile(file.url, file.name)" style="width: 60%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;">{{file.name}}</span>
            <span class="uploadtip" v-if="file.url" @click="delFile(idx, dynamic.dynamicAttachment)"><i class="el-icon-delete"></i></span>
            <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
          </div>
        </div>
        <div class="bottom-btn">
          <div @click="closeReply">关闭</div>
          <div @click="submitDynamic">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import {dateUtil} from '@/utils/dateUtil'
import formUtil from "@/utils/formUtil";
import Goal from './Goal'

export default {
  data() {
    return {
      members: [],
      showReply: false,
      isProgress: true,
      showGoalAction: false,
      krList: [],
      showProgress: false,
      showAddkr: false,
      showModule: false,
      projectList: [],
      goalForm: {
        id: '',
        goalName: '',
        goalExecuteDepartmentId: '',
        goalExecuteDepartmentName: '',
        goalTag: '',
        goalLevel: '',
        goalBelongId: '',
        goalBelongName: '',
        goalContent: '',
        goalPeriodYear: '',
        goalPeriodTime: '',
        goalStatus: '',
        krList: []
      },
      animationName: 'open',
      animationName2: 'open',
      animationName3: 'open',
      krForm: {
        krName: '',
        krBelongGoalId: '',
        krBelongGoalName: '',
        krDataType: '1',
        krStartTime: '',
        krFinishTime: '',
        krContent: '',
        krWeightCoefficient: '',
        krStatus: '1',
        confidenceEntities: []
      },
      krFormVerify: {
        krName: '输入关键结果或里程碑名称',
        krStartTime: '请选择执行开始时间',
        krFinishTime: '请选择执行结束时间'
      },
      krIsCheck: false,
      krProgressPercent: 0,
      confidenceRemark: '',
      confidenceIndex: 0,
      dynamic: {
        dynamicBelongId: '',
        dynamicBelongName: '',
        dynamicContent: '',
        dynamicAttachment: [],
        dynamicAscription: ''
      },
      goalTrends: [],
      krTrends: [],
      goalPeriodTime: {
        '0201': '第1季度LRK',
        '0202': '第2季度LRK',
        '0203': '第3季度LRK',
        '0204': '第4季度LRK',
        '0200': '年度LRK',
      },
    }
  },
  async mounted() {
    let id = this.$route.params.id;
    await this.getGoalDetail(id);
    if(this.goalForm.goalStatus === '1') {
      this.loadMembers().then(async data => {
        let result = await this.$httpN.postB('lkr/lkrdynamic/getAtUser', {id: id}, false)
        let arr = result.map((item) => item.id);
        let membersObj = data.filter((item) => !arr.includes(item.emplId))
        this.members = membersObj.map((item) => item.emplId);
      });
    }
    this.getGoalTrends(id);
  },
  components: {
    Goal
  },
  mixins: [dingMixin],
  methods: {
    delReply(id) {
      this.mobileConfirm('此操作将永久删除回复, 是否继续?', async ()=> {
        if(!await this.$httpN.postB('lkr/lkrdynamic/delete', {id: id}, false)) return;
        this.mobileMessage('删除成功');
        this.getGoalTrends(this.goalForm.id);
        if(this.showAddkr) this.getKrTrends();
      })
    },
    detectInput() {
      if(this.dynamic.dynamicContent.charAt(this.dynamic.dynamicContent.length - 1) === '@'){
        this.complexPicker(1, this.members, []).then((data)=>{
          this.dynamic.dynamicContent += data[0].name + ' '
        })
      }
    },
    async openKrAction() {
      if(this.krForm.krDataType === '1') {
        this.mobileSelect('更多操作', ['编辑关键结果', '删除关键结果','添加信心指数', '更新结果进度'],({buttonIndex}) => {
          if(buttonIndex === 0) {
            this.krIsCheck = false;
          }else if(buttonIndex === 1){
            if(this.krForm.canUpdateProgress !== '1') return this.mobileAlert('当前关键结果无法删除');
            this.delKr();
          }else if(buttonIndex === 2){
            let date=new Date();
            let year = date.getFullYear();
            let week = this.getYearWeek(date);
            if(this.krForm.confidenceEntities.length > 0) {
              let lastConfidence = this.krForm.confidenceEntities[0];
              if(Number(lastConfidence.confidencePeriodYear) > year || Number(lastConfidence.confidencePeriodYear) === year && Number(lastConfidence.confidencePeriodTime.substr(2,4)) >= week) return this.mobileAlert('本周已添加信心指数，请下周再添加')
            }
            this.openProgress(false);
          }else if(buttonIndex === 3){
            if(this.krForm.canUpdateProgress !== '1') return this.mobileAlert('当前关键结果的进度由下级目标决定');
            this.openProgress(true);
          }
        })
      }else if(this.krForm.krDataType === '2') {
        this.mobileSelect('更多操作', ['编辑里程碑', '删除里程碑'],({buttonIndex}) => {
          if(buttonIndex === 0) {
            this.krIsCheck = false;
          }else if(buttonIndex === 1){
            this.delKr();
          }
        })
      }
    },
    async getGoalTrends(id) {
      let result = await this.$httpN.postB('lkr/lkrdynamic/dynamicList', {dynamicBelongId: id, dynamicAscription: 1, limit: 999, page: 1})
      result.list.forEach((item) => {
        item.dynamicAttachment = item.dynamicAttachment? JSON.parse(item.dynamicAttachment): [];
      })
      this.goalTrends = result.list;
    },
    async getKrTrends() {
      let result = await this.$httpN.postB('lkr/lkrdynamic/dynamicList', {dynamicBelongId: this.krForm.id, dynamicAscription: (parseInt(this.krForm.krDataType) + 1), limit: 999, page: 1})
      result.list.forEach((item) => {
        item.dynamicAttachment = item.dynamicAttachment? JSON.parse(item.dynamicAttachment): [];
      })
      this.krTrends = result.list;
    },
    openReply() {
      this.dynamic.dynamicBelongId = this.showAddkr? this.krForm.id: this.goalForm.id;
      this.dynamic.dynamicBelongName = this.showAddkr? this.krForm.krName: this.goalForm.goalName;
      this.dynamic.dynamicAscription = this.showAddkr? this.krForm.krDataType === '1'? '2': '3': '1';
      this.dynamic.dynamicContent = '';
      this.dynamic.dynamicAttachment = [];
      this.showReply = true;
      this.$nextTick(() => {
        this.$refs.replymask.style.opacity = 0.5;
      })
    },
    closeReply() {
      this.animationName3 = 'close';
      this.$refs.replymask.style.opacity = 0;
      setTimeout(() => {
        this.showReply = false;
        this.animationName3 = 'open';
      }, 225)
    },
    async submitDynamic() {
      if (this.dynamic.dynamicContent === '' && this.dynamic.dynamicAttachment.length === 0) return this.mobileAlert("请输入评论内容或添加附件后提交");
      if(this.dynamic.dynamicAttachment.filter(item => !item.url).length > 0) return this.mobileAlert('附件正在上传，请稍候……');
      if(! await this.$httpN.postB('lkr/lkrdynamic/dynamicSave', this.dynamic)) return 
      this.mobileMessage('评论成功');
      this.closeReply();
      this.getGoalTrends(this.goalForm.id);
      if(this.showAddkr) this.getKrTrends();
    },
    reload() {
      this.getGoalDetail(this.goalForm.id);
      this.getGoalTrends(this.goalForm.id);
      window.NEEDREFRESH = true;
    },
    saveProgressOrCon() {
      if(this.isProgress) {
        this.krProcessUpdate();
      }else {
        this.confidenceSave();
      }
    },
    getYearWeek(endDate) {
      //本年的第一天
      let beginDate = new Date(endDate.getFullYear(), 0, 1);
      //星期从0-6,0代表星期天，6代表星期六
      let endWeek = endDate.getDay();
      if (endWeek == 0) endWeek = 7;
      let beginWeek = beginDate.getDay();
      if (beginWeek == 0) beginWeek = 7;
      //计算两个日期的天数差
      let millisDiff = endDate.getTime() - beginDate.getTime();
      let dayDiff = Math.floor(( millisDiff + (beginWeek - endWeek) * (24 * 60 * 60 * 1000)) / 86400000);
      return Math.ceil(dayDiff / 7) + 1;
    },
    async confidenceSave() {
      let date=new Date();
      let year = date.getFullYear();
      let week = this.getYearWeek(date);
      let confidence = {
        confidenceBelongId: this.krForm.id,
        confidenceBelongName: this.krForm.krName,
        confidenceIndex: this.confidenceIndex,
        confidenceRemark: this.confidenceRemark,
        confidencePeriodYear: ''+year,
        confidencePeriodTime: '00'+week,
        confidenceCreateTime: (new Date).Format('yyyy-MM-dd')
      }
      if (!(await this.$httpN.postB('lkr/confidence/confidenceSave', confidence))) return;
      this.mobileMessage('添加成功')
      this.krForm.krProgressPercent = this.krProgressPercent;
      this.krForm.confidenceEntities.unshift(confidence)
      this.getGoalDetail(this.goalForm.id);
      this.getGoalTrends(this.goalForm.id);
      this.getKrTrends();
      this.closeProgress();
    },
    async krProcessUpdate() {
      if (!(await this.$httpN.postB('lkr/kr/krProcessUpdate', {id: this.krForm.id, krProgressPercent: this.krProgressPercent}))) return;
      this.mobileMessage('更新成功')
      this.krForm.krProgressPercent = this.krProgressPercent;
      this.getGoalDetail(this.goalForm.id);
      this.getGoalTrends(this.goalForm.id);
      this.getKrTrends();
      this.closeProgress();
      window.NEEDREFRESH = true;
    },
    openGoalAction() {
      this.mobileSelect('更多操作', ['编辑目标', '删除目标'],({buttonIndex}) => {
        if(buttonIndex === 0) {
          this.$refs.goal.openGoalDialog(this.goalForm);
        }else if(buttonIndex === 1){
          this.mobileConfirm('您确定要删除目标吗', async ()=> {
            if(! await this.$httpN.postB("lkr/goal/goalDelete", {id: this.goalForm.id})) return 
            this.mobileMessage('删除成功');
            window.NEEDREFRESH = true;
            this.$router.go(-1)
          })
        }
      })
    },
    delKr() {
      this.mobileConfirm(`您确定要删除该${this.krForm.krDataType === '1'? '关键结果': '里程碑'}吗`, async ()=> {
        if(! await this.$httpN.postB("lkr/kr/krDelete", {id: this.krForm.id})) return 
        this.mobileMessage('删除成功');
        this.closeKr();
        this.reload();
      })
    },
    async getGoalDetail(id) {
      this.goalForm = await this.$httpN.postB('lkr/goal/info', {id});
      this.goalForm.krList.sort((pre, next) => parseInt(pre.krDataType) - parseInt(next.krDataType));
    },
    async saveKr() {
      if(!formUtil.verifyData(this.krForm, this.krFormVerify)) return;
      if(new Date(this.krForm.krStartTime).getTime() > new Date(this.krForm.krFinishTime).getTime()) return this.$message.error('执行结束时间必须大于执行开始时间')
      if (!(await this.$httpN.postB(this.krForm.id ? 'lkr/kr/krUpdate': 'lkr/kr/krSave', this.krForm))) return;
      this.mobileMessage('保存成功')
      this.closeKr();
      this.getGoalDetail(this.goalForm.id);
      this.getGoalTrends(this.goalForm.id);
      if(this.goalForm.goalStatus === '1') window.NEEDREFRESH = true;
    },
    closeKr() {
      this.animationName = 'close';
      this.$refs.mask.style.opacity = 0;
      setTimeout(() => {
        this.showAddkr = false;
        this.animationName = 'open';
      }, 225)
    },
    async openKr(kr) {
      if(kr) {
        this.krForm = formUtil.deepCopy(kr);
        this.krProgressPercent = this.krForm.krProgressPercent;
        this.krIsCheck = true;
        this.getKrTrends();
      }else{
        formUtil.resetData(this.krForm);
        this.krIsCheck = false;
        this.krForm.krStatus = '1';
        this.krForm.krDataType = '1';
        this.krForm.krBelongGoalId = this.goalForm.id;
        this.krForm.krBelongGoalName = this.goalForm.goalName;
      }
      this.showAddkr = true;
      this.$nextTick(() => {
        this.$refs.mask.style.opacity = 0.5;
      })
    },
    closeProgress() {
      this.animationName2 = 'close';
      this.$refs.mask2.style.opacity = 0;
      setTimeout(() => {
        this.showProgress = false;
        this.animationName2 = 'open';
      }, 225)
    },
    openProgress(type) {
      this.confidenceIndex = 0;
      this.confidenceRemark = '';
      this.isProgress = type;
      this.showProgress = true;
      this.$nextTick(() => {
        this.$refs.mask2.style.opacity = 0.5;
      })
    },
    selectDate(type) {
      if(this.krForm.id && this.krIsCheck) return 
      this.mobileSelectDate(this.currentDate, (date) => {
        this.krForm[type] = date;
      });
    },
    async uploadFile(e, target) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(file.size / 1024 / 1024 > 20) return $this.mobileAlert('上传单个文件大小不能超过20MB!请压缩文件')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        let newfile = {
          name: file.name,
          url: '',
          size: file.size,
          uploader: $this.userInfo.realName,
          time: dateUtil.thisDay()
        }
        target.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.url = res.data.url;;
          }else if(res.data.code === 500) {
            $this.mobileAlert(res.data.msg)
            target.pop();
          }
        })
      })
      e.target.value = ''
    },
    delFile(idx,target){
      target.splice(idx, 1)
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) {
         return this.dingPreviewPic(url);
      }else{
        this.mobileAlert('手机不支持下载文件，请到电脑端下载');
      }
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },

  }
}
</script>

<style lang='scss' scoped>
  .detail-wrapper{
    min-height: 100vh;
    padding: 16px;
    padding-bottom: 60px;
    background: #F6F6F6;
    .kr-header{
      font-size: 18px;
      font-weight: bold;
    }
    .kr-progress{
      margin-top: 10px;
      .progress{
        float:right;
        width: calc(100% - 75px);
      }
    }
    .belong{
      margin-top: 10px;
      font-size:12px;
      >span.row-1{
        display: inline-block;
        margin-right: 10px;
        background: #C9E8FE;
        padding: 5px 7px;
        color: #3a8ee6;
        border-radius: 50px;
      }
      >span.row-2{
        display: inline-block;
        padding: 5px 7px;
        border:1px solid #ECECEC;
        border-radius: 50px;
        background: white;
      }
    }
    .kr-status{
      margin-top: 10px;
      .progress{
        float:right;
        width: calc(100% - 75px);
      }
    }
    .kr-wrapper{
      margin-top: 40px;
      .kr-title{
        span.add:last-child{
          color: #3a8ee6;
          float:right;
        }
      }
      .kr-list{
        margin-top: 10px;
        .kr-item{
          height: 80px;
          background: white;
          margin-bottom: 10px;
          display: flex;
          border-radius: 4px;
          box-shadow: 0 1px 3px rgb(221, 221, 221);
          .progress{
            width: 80px;
            padding-top:20px;
            padding-left: 20px;
          }
          .kr-info{
            width: calc(100% - 80px);
            padding-top: 20px;
            padding-right: 20px;
            p{
              margin: 0;
            }
            .name{
              font-size: 16px;
              white-space:nowrap;
              overflow:hidden;
              text-overflow:ellipsis;
            }
            .other{
              margin-top:8px;
              font-size:12px;
              white-space:nowrap;
              overflow:hidden;
            }
          }
          .lcb-info{
            width: 100%;
            padding-left: 20px;
            padding-right: 10px;
            p{
              margin: 0;
            }
            .name{
              width: 100%;
              font-size: 16px;
              line-height: 80px;
              white-space:nowrap;
              overflow:hidden;
              text-overflow:ellipsis;
            }
          }
        }
      }
      .kr-trend{
        margin-top: 20px;
        .trend-list{
          margin-top: 20px;
          .trend-item{
            margin-bottom: 15px;
            .row-1{
              color: #909399;
              >div:first-child{
                float:left;
              }
              >div:last-child{
                float:right;
              }
            }
            .row-2{
              margin-top: 5px;
              font-weight: normal;
              .reply-trend{
                display: inline-block;
                padding: 6px 10px;
                background: #C9E6FF;
                border: 1px solid #A5CFF3;
                font-weight: normal;
                border-radius: 0 5px 5px;
                .tr1{
                  border-bottom: 1px solid #C3DFF7;
                  padding-bottom:5px;
                  margin-bottom: 5px;
                }
              }
            }
            .row-3{
              margin-top: 10px;
            }
            .fileitem{
              line-height: 32px;
              margin-bottom: 5px;
              background: white;
              padding-left:10px;
              font-size: 12px;
              color: #606266;
              .uploadtip{
                float:right;
                margin-right: 20px;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
.addkrDialog, .progressDialog{
  position: fixed;
  height: 100vh;
  bottom: 0;
  left: 0;
  width: 100%;
  .mask{
    background: rgb(0,0,0);
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    transition: all 225ms;
    width: 100%;
    opacity: 0;
  }
  .addContent{
    position: absolute;
    height: 100vh;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    background: #F2F3F5;
    animation: btt-drawer-in 225ms cubic-bezier(0,0,.2,1) 0s;
    .kr-header{
      height: 46px;
      line-height: 46px;
      background: white;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      position: relative;
      .kr-action{
        position: absolute;
        right: 16px;
        top: 0;
        height: 50px;
        i{
          margin-left:10px;
        }
      }
      i.arrow{
        position: absolute;
        left: 15px;
        top: 15px;
        font-weight: bold;
      }
    }
    .kr-content{
      margin-top: 10px;
      .form-item{
        background: white;
        padding: 6px 12px;
        border-bottom: 1px solid #ECECEC;
        .kr-name{
          font-size: 18px;
          width: 100%;
          height: 60px;
          border: none;
          outline: none;
          resize:none;
          background: transparent;
        }
        .label{
          float:left;
          line-height: 46px;
          font-size:15px;
        }
        .input{
          float:right;
          line-height: 46px;
          min-width: 40px;
          text-align: right;
        }
      }
    }
    .kr-other{
      .confidence{
        margin-top: 20px;
        padding: 0 12px;
        .confidence-header{
          font-size: 15px;
        }
        .kr-item-progress{
          .progress{
            float:right;
            width: calc(100% - 75px);
          }
        }
      }
      .kr-trend{
        margin-top: 20px;
        padding: 0 12px;
        .trend-list{
          margin-top: 20px;
          .trend-item{
            margin-bottom: 15px;
            .row-1{
              color: #909399;
              >div:first-child{
                float:left;
              }
              >div:last-child{
                float:right;
              }
            }
            .row-2{
              margin-top: 5px;
              font-weight: normal;
              .reply-trend{
                display: inline-block;
                padding: 6px 10px;
                background: #C9E6FF;
                border: 1px solid #A5CFF3;
                font-weight: normal;
                border-radius: 0 5px 5px;
                .tr1{
                  border-bottom: 1px solid #C3DFF7;
                  padding-bottom:5px;
                  margin-bottom: 5px;
                }
              }
            }
            .row-3{
              margin-top: 10px;
            }
            .fileitem{
              line-height: 32px;
              margin-bottom: 5px;
              background: white;
              padding-left:10px;
              font-size: 12px;
              color: #606266;
              .uploadtip{
                float:right;
                margin-right: 20px;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
    .kr-button{
      height: 50px;
      background: white;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 6px 12px;
      div{
        text-align: center;
        width: 100%;
        background: #3396FB;
        line-height: 36px;
        color: white;
        border-radius: 5px;
      }
    }
  }
  .addContent.open{
    animation: btt-drawer-in 225ms cubic-bezier(0,0,.2,1) 0s;
  }
  .addContent.close{
    animation: btt-drawer-out 225ms cubic-bezier(0,0,.2,1) 0s;
  }
}
.progressDialog{
  .addContent{
    height: 250px;
  }
}
.goal-bottom-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: white;
  padding: 11px 60px 11px 16px;
  i{
    position: absolute;
    right: 20px;
    font-size: 24px;
    top: 13px;
    color: #606266;
  }
  .reply-row{
    background: #F6F6F6;
    height: 28px;   
    border-radius: 40px;
    position: relative;
    i{
      position: absolute;
      right: 10px;
      font-size: 20px;
      top: 5px;
    }
  }
}
.reply-page{
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: white;
  .reply-content.open{
    animation: btt-drawer-in 225ms cubic-bezier(0,0,.2,1) 0s;
  }
  .reply-content.close{
    animation: btt-drawer-out 225ms cubic-bezier(0,0,.2,1) 0s;
  }
  .reply-content{
    height: 100vh;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    background: white;
  }
  .mask{
    background: rgb(0,0,0);
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    transition: all 225ms;
    width: 100%;
    opacity: 0;
  }
  .bottom-btn{
    position: absolute;
    bottom: 0;
    right:0;
    width: 100%;
    display: flex;
    div{
      flex:1;
      text-align: center;
      line-height: 50px;
      background: #F2F2F2;
      color: #8D8F96;
    }
    >div:last-child{
      color:white;
      background: #639EFC;
    }
  }
  .reply-title{
    margin-bottom: 10px;
  }
  .task-info{
    
    textarea{
      width: 100%;
      height: 250px;
      border: none;
      outline: none;
      resize:none;
      background: #F9F9F9;
      padding: 10px;
    }
  }
  .upload-file{
    margin-top: 30px;
    font-size: 14px;
    color: #409EFF;
    .upload-btn{
      color: #409EFF;
      margin-bottom: 10px;
    }
  }
  .fileitem{
    line-height: 32px;
    margin-bottom: 5px;
    background: #F5F5F5;
    padding-left:10px;
    font-size: 12px;
    color: #606266;
    .uploadtip{
      float:right;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
</style>